<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img
          class="swiper-img"
          :src="item.imgUrl"
          alt
        />
      </swiper-slide>

      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  components: {},
  props: {},
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        loop:true
      },
      swiperList:[
        {
          id:'001',
          imgUrl:'//source.qunarzz.com/site/images/wns/20191205_qunar_dujia_750x192_3.jpg'
        },
        {
          id:'002',
          imgUrl:'//source.qunarzz.com/site/images/wns/201901206_dujia_homepage_5.jpg'
        },
        {
          id:'003',
          imgUrl:'//source.qunarzz.com/site/images/wns/20191210_qunar_dujia_banner750x192_4.jpg'
        },
        {
          id:'004',
          imgUrl:'//source.qunarzz.com/site/images/wns/20191205_dujia_homepage_750x192_6.jpg'
        }
        
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active {
  background: #fff;
}

.wrapper {
  width: 100%;
  overflow: hidden;
  padding-bottom: 26%;
  background: #ccc;
  height: 0;

  .swiper-img {
    width: 100%;
  }
}
</style>